<!DOCTYPE html>
<html>
<head>
    <title>Capacitor Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="capacitorCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('capacitorCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px Arial';

        // --- Plate Coordinates ---
        // Using a simple parallelogram representation to show perspective
        const plateHeight = 170;
        const plateWidth = 20;
        const plateSlant = 10;

        const leftPlateX = 180;
        const rightPlateX = 350;
        const plateTopY = 100;
        const plateBottomY = plateTopY + plateHeight;

        // --- Draw Left Plate ---
        ctx.beginPath();
        ctx.moveTo(leftPlateX, plateBottomY);
        ctx.lineTo(leftPlateX, plateTopY);
        ctx.lineTo(leftPlateX + plateWidth, plateTopY - plateSlant);
        ctx.lineTo(leftPlateX + plateWidth, plateBottomY - plateSlant);
        ctx.closePath();
        ctx.stroke();

        // --- Draw Right Plate ---
        ctx.beginPath();
        ctx.moveTo(rightPlateX, plateBottomY);
        ctx.lineTo(rightPlateX, plateTopY);
        ctx.lineTo(rightPlateX + plateWidth, plateTopY - plateSlant);
        ctx.lineTo(rightPlateX + plateWidth, plateBottomY - plateSlant);
        ctx.closePath();
        ctx.stroke();
        
        // --- Draw Central Axis ---
        const axisY = (2 * plateTopY + plateHeight) / 2 - plateSlant / 2;
        ctx.beginPath();
        ctx.moveTo(50, axisY);
        ctx.lineTo(leftPlateX, axisY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(rightPlateX, axisY);
        ctx.lineTo(canvas.width - 50, axisY);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.setLineDash([5, 5]);
        ctx.moveTo(leftPlateX, axisY);
        ctx.lineTo(rightPlateX, axisY);
        ctx.stroke();
        ctx.setLineDash([]); // Reset to solid line

        // --- Draw Dimension 'x' ---
        const dimY = plateTopY - 50;
        const dimTextY = dimY - 10;
        const dashEndY = dimY + 5;

        // Dashed lines from plates
        ctx.beginPath();
        ctx.setLineDash([3, 3]);
        ctx.moveTo(leftPlateX, plateTopY);
        ctx.lineTo(leftPlateX, dashEndY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(rightPlateX, plateTopY);
        ctx.lineTo(rightPlateX, dashEndY);
        ctx.stroke();
        ctx.setLineDash([]);

        // Horizontal dimension line with arrows
        ctx.beginPath();
        ctx.moveTo(leftPlateX, dimY);
        ctx.lineTo(rightPlateX, dimY);
        // Arrowhead left
        ctx.moveTo(leftPlateX + 8, dimY - 5);
        ctx.lineTo(leftPlateX, dimY);
        ctx.lineTo(leftPlateX + 8, dimY + 5);
        // Arrowhead right
        ctx.moveTo(rightPlateX - 8, dimY - 5);
        ctx.lineTo(rightPlateX, dimY);
        ctx.lineTo(rightPlateX - 8, dimY + 5);
        ctx.stroke();

        // 'x' label
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText('x', (leftPlateX + rightPlateX) / 2, dimTextY);

        // --- Draw 'metal plates' Label ---
        const labelPointX = 350;
        const labelPointY = 40;
        const labelTextX = labelPointX + 10;
        
        // Leader lines
        ctx.beginPath();
        ctx.moveTo(leftPlateX + plateWidth, plateTopY - plateSlant); // Top-right of left plate
        ctx.lineTo(labelPointX, labelPointY);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(rightPlateX + plateWidth, plateTopY - plateSlant); // Top-right of right plate
        ctx.lineTo(labelPointX, labelPointY);
        ctx.stroke();

        // Text
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('metal plates', labelTextX, labelPointY);
        
        // --- Draw Figure Caption ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.font = 'bold 20px Arial';
        ctx.fillText('Fig. 6.1', canvas.width / 2, canvas.height - 20);

    </script>
</body>
</html>